<template>
  <view class="shop-number">
    <view class="shop-number-box">
      <button class="reduce-btn" plain="true" @click="GoodsNunber(-1)">-</button>
      <input class="inputText" type="text" disabled="true" :value="number">
      <button class="add-btn" plain="true" @click="GoodsNunber(1)">+</button>
    </view>
  </view>
</template>

<script setup>
import {ref} from 'vue'
const emit = defineEmits(['modelValue', 'change'])
 const props = defineProps({
   modelValue: {
     type: Number,
     default: 1
   },
   minVal: {
     type: Number,
     default: 1
   },
   maxVal: {
     type: Number
   }
 })
  const number = ref(props.modelValue)
 const GoodsNunber = (nub) => {
   const newVal = number.value + nub
    if(props.minVal > newVal) return
    if(props.maxVal < newVal) return
    number.value = newVal
    emit('change', newVal)
 }
 

</script>

<style lang="scss">
.shop-number {
  width: 180rpx;
  height: 60rpx;
  border: 3rpx solid #999;
  .shop-number-box {
    display: flex;
    justify-content: center;
    align-items: center;
    >.reduce-btn, .add-btn {
      width: 30%;
      border: 0;
      padding: 0;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 45rpx;
    }
    .inputText {
      flex: 1;
      text-align: center;
      font-size: 34rpx;
      color: #000;
      height: 60rpx;
      border-left: 1rpx solid #999;
      border-right: 1rpx solid #999;
    }
  }
}
</style>